<!-- 成交结算标准 -->
<template>
    <div>
        <div>
            创建时间：
            <el-date-picker
                    v-model="searchTime"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions">
            </el-date-picker>
            <el-button type="primary" @click="searchDataByTime" id="monitorEnter">查询</el-button>
            <el-button type="primary" @click="newPage('new',false)">新建</el-button>
        </div>
        <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%;margin-top: 20px;">
            <el-table-column
                    type="index"
                    label="序号"
                    align="center"
                    width="50">
            </el-table-column>
            <el-table-column
                    property="version"
                    align="center"
                    label="版本号">
            </el-table-column>
            <el-table-column
                    property="extractCategory"
                    align="center"
                    label="提取规则"
                    width="120">
                <template slot-scope="scope">
                    {{scope.row.ruleList | ruleListFilter(1) }}
                </template>
            </el-table-column>
            <el-table-column
                    property="calculationNode"
                    width="100"
                    align="center"
                    label="计提节点">
                <template slot-scope="scope">
                    <el-button type="text" @click="viewCalcNode(scope.row.id)">查看</el-button>
                    <!--{{calNode[scope.row.calculationNode]}}-->
                </template>
            </el-table-column>
            <el-table-column
                    property="address"
                    align="center"
                    label="计提基数">
                <template slot-scope="scope">
                    {{scope.row.ruleList | ruleListFilter(2) }}
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="区间标准">
                <template slot-scope="scope">
                    <el-button type="text" @click="viewInterval(scope.row.id)">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    property="createTime"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    align="center"
                    property="creatorName"
                    label="创建人">
            </el-table-column>
            <el-table-column
                    width="100"
                    align="center"
                    label="详细信息">
                <template slot-scope="scope">
                    <el-button type="text" @click="newPage('view',scope.row.id)">查看</el-button>
                    <el-button type="text" @click="newPage('edit', scope.row.id)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagebar">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page.sync="tableConfig.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="tableConfig.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="tableConfig.totalSize">
            </el-pagination>
        </div>

        <!-- 区间范围弹框 -->
        <el-dialog
                title="查看区间范围"
                :visible.sync="intervalDialogVisible"
                width="500px">
            <div>
                选择等级：
                <el-select v-model="classification" placeholder="请选择等级" @change="getSingleTSLevel(classification, currentDealId)">
                    <el-option
                            v-for="item in classificationOptions"
                            :key="item.projectLevelId"
                            :label="item.developerName + ' - '+ item.projectLevelName"
                            :value="item.projectLevelId">
                    </el-option>
                </el-select>
                <el-table
                        :data="classificationTableData"
                        border
                        highlight-current-row
                        style="width: 100%;margin-top: 20px;">
                    <el-table-column
                            property="name"
                            align="center"
                            label="房款（万/套）">
                        <template slot-scope="scope">
                            <span v-if="scope.row.lowerMark === 1">
                                {{scope.row.upper}}以下
                            </span>
                            <span v-else-if="scope.row.upperMark ===1">
                                {{scope.row.lower}}以上
                            </span>
                            <span v-else>
                                {{scope.row.lower}} - {{scope.row.upper}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            property="extractAmount"
                            :label="['提取金额（元）', '提取比例（%）'][extractCategoryTitle-1]">
                    </el-table-column>
                </el-table>
            </div>

            <span slot="footer">
                <el-button @click="intervalDialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="查看计提节点"
                :visible.sync="calcNodeDialogVisible"
                width="500px">
            <div>
                <el-table
                        :data="calcNodeList"
                        border
                        highlight-current-row
                        style="width: 100%;margin-top: 20px;">
                    <el-table-column
                            property="projectLevelName"
                            align="center"
                            label="类型">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            property="calculateNodeNames"
                            label="节点">
                    </el-table-column>
                </el-table>
            </div>

            <span slot="footer">
                <el-button @click="calcNodeDialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import api from '@/api/apiPath'
    import {extractCategory, ruleEffect, calNode, extractBaseNum} from '../fieldMap'

    export default {
        name: "transactionSettlement",
        title: '成交结算标准',
        data() {
            return {
                currentDealId: 0,
                tableConfig: {
                    startTime: "",
                    endTime: "",
                    pageNum: 1,
                    pageSize: 10,
                    totalSize: 10
                },
                searchTime: [],
                classification: "",
                classificationOptions: [],
                classificationTableData: [],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                intervalDialogVisible: false,
                calcNodeDialogVisible: false,
                calcNodeList: [],
                tableData: [],
                extractCategoryTitle: 1,
                extractCategory,
                ruleEffect,
                calNode,
                extractBaseNum
            }
        },
        created() {
            this.getTransactionSettlementList()
            //this.getAllProjectLevel()
        },
        activated() {
            this.searchDataByTime()
        },
        mounted() {

        },
        filters: {
            ruleListFilter(ruleList, type) {
                let arr = [];
                ruleList.forEach((item) => {
                    if (type === 1) {
                        const extractCategoryText = extractCategory[item.extractCategory]
                        if (!arr.includes(extractCategoryText)) {
                            arr.push(extractCategoryText)
                        }
                    } else {
                        const extractBaseNumText = extractBaseNum[item.extractBaseNum] || '业务成交套数激励'
                        if (!arr.includes(extractBaseNumText)) {
                            arr.push(extractBaseNumText)
                        }
                    }
                });
                return arr.join(';')
            }
        },
        methods: {
            viewCalcNode(id) {
                this.$axios.post("/commallocation/deal/getNodeList", {
                    id
                }).then((res) => {
                    this.calcNodeList = res
                    this.calcNodeDialogVisible = true;
                })

            },
            searchDataByTime() {
                if (this.searchTime === null) {
                    this.searchTime = ["", ""]
                }
                if (this.searchTime.length) {
                    this.tableConfig.startTime = +new Date(this.searchTime[0])
                    this.tableConfig.endTime = +new Date(this.searchTime[1])
                }
                this.tableConfig.pageNum = 1;
                this.getTransactionSettlementList();
            },
            getTransactionSettlementList() {
                this.axios.post(api.getTransactionSettlementList, {
                    pageSize: this.tableConfig.pageSize,
                    pageNum: this.tableConfig.pageNum,
                    startTime: this.tableConfig.startTime,
                    endTime: this.tableConfig.endTime,
                }).then((res) => {
                    if (res) {
                        this.tableData = res.data.data.list;
                        this.tableConfig.totalSize = res.data.data.total
                    }
                })
            },
            // getAllProjectLevel() {
            //     this.axios.post(api.getAllProjectLevel, {}).then((res) => {
            //         this.classificationOptions = res.data.data
            //         this.classification = this.classificationOptions[0].id;
            //     })
            // },
            handleSizeChange(size) {
                this.tableConfig.pageSize = size
                this.getTransactionSettlementList()
            },
            handleCurrentChange(page) {
                this.tableConfig.pageNum = page
                this.getTransactionSettlementList()
            },
            newPage(type, id) {
                this.$router.push({path: "./transactionSettlementHandle", query: {type: type, id: id}})
            },
            viewInterval(id) {
                this.currentDealId = id;
                this.classificationTableData = [];
                this.axios.post(api.getProjectLevelList, {
                    dealId: id
                }).then((res) => {
                    this.classificationOptions = res.data.data;
                    this.classification = this.classificationOptions[0].projectLevelId;
                    this.intervalDialogVisible = true;
                    this.getSingleTSLevel(this.classification, id);
                })
            },
            getSingleTSLevel(projectLevelId, dealId) {
                this.axios.post(api.getSingleTSLevel, {
                    dealId: dealId,
                    projectLevelId: projectLevelId
                }).then((res) => {
                    this.classificationTableData = res.data.data;
                    const currentLevel = this.classificationOptions.find((item) => {
                        return projectLevelId === item.projectLevelId
                    })
                    this.extractCategoryTitle = currentLevel.extractCategory
                })
            },
        },
        components: {},
        computed: {}
    }
</script>